<template>
	<view id="box">
		<template v-if="otherList.length==0">
			<view class="load">
				<u-loading-page :loading="true"></u-loading-page>
			</view>
		</template>
		<template v-else>
			<u-swiper :list="swiperImgList" @click="clickSwiperItem" indicator indicatorMode="dot"></u-swiper>
			<u-grid :border="false" @click="clickGridItem" col="5">
				<u-grid-item v-for="(item,index) in imageList" :key="index">
					<image lazy-load :src="item" mode="" style="width: 1.44rem;height: 1.52rem;"></image>
				</u-grid-item>
			</u-grid>
			<view class="divider_line"></view>
			<view class="shop-item-first el-flex" v-if="otherList[0]">
				<view class="first-left" v-if="otherList[0].body">
					<image lazy-load @click="toShopDetail(otherList[0].body.items[0].action)"
						:src="`https:${otherList[0].body.items[0].img_url}`"></image>
				</view>
				<view class="first-right el-flex">
					<image lazy-load @click="toShopDetail(otherList[0].body.items[1].action)"
						:src="`https:${otherList[0].body.items[1].img_url}`" mode="heightFix"></image>
					<image lazy-load @click="toShopDetail(otherList[0].body.items[2].action)"
						:src="`https:${otherList[0].body.items[2].img_url}`" mode="heightFix"></image>
				</view>
			</view>

			<view class="divider_line"></view>
			<view class="shop-item-second" v-if="otherList[1]">
				<image lazy-load @click="toShopDetail(otherList[1].body.items[0].action)"
					:src="`https:${otherList[1].body.items[0].img_url}`" mode="heightFix"></image>
			</view>
			<view class="list_two_type">
				<u-row customStyle="margin-bottom: 0.096rem" :gutter='5' v-for="(item,index) in shopList.slice(0,4)"
					:key="index">
					<u-col span="6" v-for="(child,dhildIndex) in item.body.items" @click="toShopDetail(child.action)">
						<view class="item-img">
							<LazyLoad :src="child.img_url" width='3.44rem' height='2.8rem'></LazyLoad>
						</view>
						<view class="item-text">
							<view class="item-name text-ellipsis">
								{{child.product_name}}
							</view>
							<view class="item-info text-ellipsis">
								{{child.product_brief}}
							</view>
							<text class="item-money el-flex">
								<text>¥{{child.show_price}}</text>
								<text class="qi">
									起
								</text>
							</text>
							<view class="btn">
								<view class="buybtn">
									立即购买
								</view>
							</view>
						</view>

					</u-col>

				</u-row>
			</view>
			<view class="list_action_title" @click="toChannelDetail('14501')">
				<view class=" exposure">
					<view class="ti">
						更多小米手机产品
					</view>
				</view>
			</view>
			<view class="divider_line"></view>
			<view class="shop-item-second" v-if="otherList[2]">
				<image lazy-load @click="toShopDetail(otherList[2].body.items[0].action)"
					:src="`https:${otherList[2].body.items[0].img_url}`" mode="heightFix">
				</image>
			</view>
			<view class="list_action_title" @click="toChannelDetail('13249')">
				<view class=" exposure">
					<view class="ti">
						更多小米电视产品
					</view>
				</view>
			</view>
			<view class="divider_line"></view>
			<view class="shop-item-second" v-if="otherList[3]">
				<image lazy-load @click="toShopDetail(otherList[3].body.items[0].action)"
					:src="`https:${otherList[3].body.items[0].img_url}`" mode="heightFix">
				</image>
			</view>
			<view class="list_two_type">
				<u-row :gutter='5' v-for="(item,index) in shopList.slice(4)" :key="index">
					<u-col span="6" v-for="(child,dhildIndex) in item.body.items" @click="toShopDetail(child.action)">
						<view class="item-img">
							<LazyLoad :src="child.img_url" width='3.44rem' height='2.8rem'></LazyLoad>
						</view>
						<view class="item-text">
							<view class="item-name text-ellipsis">
								{{child.product_name}}
							</view>
							<view class="item-info text-ellipsis">
								{{child.product_brief}}
							</view>
							<text class="item-money el-flex">
								<text>¥{{child.show_price}}</text>
								<text class="qi">
									起
								</text>
							</text>

						</view>
						<view class="btn">
							<view class="buybtn">
								立即购买
							</view>
						</view>
					</u-col>

				</u-row>
			</view>
			<view class="list_action_title" @click="toChannelDetail('13326')">
				<view class=" exposure">
					<view class="ti">
						更多小米笔记本产品
					</view>
				</view>
			</view>
			<view class="divider_line"></view>
			<view class="shop-item-second" v-if="otherList[4]">
				<image @click="toShopDetail(otherList[4].body.items[0].action)" lazy-load
					:src="`https:${otherList[4].body.items[0].img_url}`" mode="heightFix">
				</image>
			</view>
			<view class="list_action_title" @click="toChannelDetail('13365')">
				<view class=" exposure">
					<view class="ti">
						更多米家家电产品
					</view>
				</view>
			</view>
			<view class="divider_line"></view>
			<view class="list_action_title" @click="toChannelDetail('14709')">
				<view class=" exposure">
					<view class="ti">
						更多米家智能产品
					</view>
				</view>
			</view>
			<view class="">
				<u-row :gutter='2' v-for="(item,index) in otherList.slice(5,8)" :key="index">
					<u-col span="6" v-for="(child,dhildIndex) in item.body.items" @click="toShopDetail(child.action)">
						<view class="otherItem">
							<image lazy-load :src="`https:${child.img_url}`" mode=""></image>
						</view>
						<view class="divider_line divider_line2"></view>
					</u-col>
				</u-row>
			</view>
			<view class="last" v-if="otherList[8]">
				<image lazy-load :src="`https:${otherList[8].body.items[0].img_url}`" mode="widthFix"></image>
			</view>
			<view class="divider_line"></view>
			<view class="list_action_title">
				<view class=" exposure">
					<view class="ti">
						了解小米
					</view>
				</view>
			</view>
			<view class="divider_line"></view>
		</template>
	</view>
</template>

<script>
	import {
		data
	} from 'uview-ui/libs/mixin/mixin';
	import LazyLoad from '../../components/LazyLoad/LazyLoad.vue'
	export default {
		options: {
			styleIsolation: 'shared'
		},
		components: {
			LazyLoad
		},
		data() {
			return {
				swiperImgList: [],
				shopList: [],
				otherList: [],
				swiperList: [],
				imageList: []
			};
		},

		methods: {
			clickGridItem(index) {
				if (index == 0) {
					uni.navigateTo({
						url: `/navPage/appdownload/appdownload`
					})
				} else if (index == 1) {
					uni.navigateTo({
						url: `/navPage/crowdfunding/crowdfunding`
					})
				} else if (index == 3) {
					uni.navigateTo({
						url: `/navPage/mfbs/mfbs`
					})
				} else if (index == 4) {
					uni.navigateTo({
						url: `/navPage/product_channel_page/product_channel_page`
					})
				} else if (index == 5) {
					uni.navigateTo({
						url: `/navPage/smartPro/smartPro`
					})
				} else if (index == 2) {
					uni.navigateTo({
						url: `/navPage/m_universal/m_universal`
					})
				} else if (index == 6) {
					uni.navigateTo({
						url: `/navPage/m_computer/m_computer`
					})
				} else if (index == 7) {
					uni.navigateTo({
						url: `/navPage/m_television/m_television`
					})
				}else if (index == 8) {
					uni.navigateTo({
						url: `/subPage/channelDetail/channelDetail?id=13365`
					})
				}

			},
			clickSwiperItem(index) {
				if (this.swiperList[0].body.items[index].action.type == 'image' || this.swiperList[0].body.items[index]
					.action.type == 'product') {
					let id = this.swiperList[0].body.items[index].action.productId
					uni.navigateTo({
						url: `/subPage/proddetail/proddetail?id=${id}`
					})
				} else if (this.swiperList[0].body.items[index].action.type == 'url') {
					if (this.swiperList[0].body.items[index].action.path.indexOf('proddetail') == -1) return
					let id = this.swiperList[0].body.items[index].action.path.split('proddetail')[1].split('/')[1]
					uni.navigateTo({
						url: `/subPage/proddetail/proddetail?id=${id}`,
						success() {

						}
					})
				}

			},
			toChannelDetail(id) {
				uni.navigateTo({
					url: `/subPage/channelDetail/channelDetail?id=${id}`,
					success() {

					}
				})
			},
			toShopDetail(action) {
				if (action.productId && action.type == "product") {
					uni.navigateTo({
						url: `/subPage/proddetail/proddetail?id=${action.productId}`,
						success() {

						}
					})
				} else if (action.type == "first_channel") {
					this.toChannelDetail(action.path)
				} else if (action.path && action.type == "product") {
					uni.navigateTo({
						url: `/subPage/proddetail/proddetail?id=${action.path}`,
						success() {

						}
					})
				} else if (action.type == 'second_channel') {
					uni.navigateTo({
						url: `/subPage/minorDetail/minorDetail?id=${action.path}`,
						success() {

						}
					})
				}

			},
			fetchData() {
				this.$request.get('/getData', {
					type: 'home'
				}).then((res) => {
					let shopList = []
					let otherList = []
					let swiperList = []
					let navList = []
					let imageList = []
					let data = res.data.data.data.sections
					data.forEach(item => {
						if (item.view_type == 'list_two_type13') {
							shopList.push(item)
						} else if (item.view_type == 'cells_auto_fill') {
							otherList.push(item)
						} else if (item.view_type == 'gallery') {
							swiperList.push(item)
						}
					})
					swiperList[0].body.items.forEach(item => {
						this.swiperImgList.push(item.img_url)
					})
					navList = otherList.slice(0, 2)
					otherList = otherList.slice(2)
					navList.forEach(item => {
						item.body.items.forEach(nav => {
							imageList.push(nav.img_url)
						})
					})
					this.otherList = otherList
					this.shopList = shopList
					this.swiperList = swiperList
					this.imageList = imageList
				}).catch(e => {
					console.log('错误了:', e)
				})
			},

		},
		mounted() {
			this.fetchData()
		},
	}
</script>

<style lang="scss" scoped>
	/deep/.u-swiper__wrapper,
	/deep/.u-swiper,
	/deep/.u-swiper__wrapper__item__wrapper__image {
		height: 3.6rem !important;
	}

	.list_action_title {
		.exposure {
			background: #fff;
			height: 1rem;
			line-height: 1rem;
			font-size: .28rem;
			text-align: center;

			.ti {
				color: rgba(0, 0, 0, .6);
				line-height: 1rem;
				font-size: .28rem;
			}
		}
	}

	.shop-item-first {
		width: 7.2rem;
		height: 5.08rem;
		background-color: #f5f5f5;

		.first-left {
			width: 3.58rem;
			height: 5.08rem;

			image {
				width: 3.58rem;
				height: 5.08rem;
			}
		}

		.first-right {
			height: 100%;
			flex: 1;
			flex-direction: column;
			justify-content: space-between;

			image {
				height: 2.52rem;
			}
		}
	}

	.shop-item-second {
		width: 7.2rem;
		height: 4.4rem;

		image {
			height: 4.4rem;
			width: 7.2rem;
		}
	}

	.list_two_type {
		padding: 0 0.12rem;
	}

	.item-img {
		width: 3.44rem;
		height: 2.8rem;

		image {
			width: 3.44rem;
			height: 2.8rem;
		}
	}

	.btn {
		padding: 0.16rem 0;
		padding-top: 0;
	}

	.item-text {
		text-align: center;
		padding: 0.2rem 0.27rem;
		padding-bottom: 0rem;

		.item-name {
			text-align: center;
			font-size: .28rem;
			color: rgba(0, 0, 0, .87);
		}

		.item-info {
			text-align: center;
			width: 100%;
			font-size: .22rem;
			line-height: .3rem;
			color: rgba(0, 0, 0, .54);
		}

		.item-money {
			font-size: .28rem;
			color: #ea625b;
			height: 1.5em;
			line-height: 1.5em;

			.qi {
				display: inline-block;
				margin-left: 0.04rem;
				font-size: .2rem;
				color: #ea625b;
			}
		}
	}

	.divider_line {
		border-bottom: 0.16rem solid rgb(245, 245, 245);
		background-color: rgb(245, 245, 245);
	}

	.divider_line2 {
		border-bottom: 0.04rem solid rgb(245, 245, 245);

	}

	.otherItem {
		height: 4.8rem;

		image {
			width: 100%;
			height: 4.8rem;
		}
	}

	.last {
		width: 100%;

		image {
			width: 100%;
		}
	}
</style>